import React, { lazy, Suspense } from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import {
  BrowserRouter,
  Routes,
  Route,
  Outlet,
  Link,
  Navigate,
  useLocation,
} from 'react-router-dom';
import Layout from './components/Layout';
import Home from './pages/Home';
const Hospital = lazy(() => import('./pages/Hospital'));
const HospitalRegistration = lazy(() =>
  import('./pages/Hospital/Registration')
);
const HospitalDetail = lazy(() => import('./pages/Hospital/Detail'));
const HospitalNotice = lazy(() => import('./pages/Hospital/Notice'));
const HospitalSuspend = lazy(() => import('./pages/Hospital/Suspend'));
const HospitalQuery = lazy(() => import('./pages/Hospital/Query'));
const HospitalSchedule = lazy(() => import('./pages/Hospital/Schedule'));
const HospitalBooking = lazy(() => import('./pages/Hospital/Booking'));

const UserCenter = lazy(() => import('./pages/User'));

const UserCertification = lazy(() => import('./pages/User/Certification'));
const UserOrder = lazy(() => import('./pages/User/Order'));
const UserOrderDetail = lazy(() => import('./pages/User/OrderDetail'));
const UserFeedback = lazy(() => import('./pages/User/Feedback'));
const UserProfile = lazy(() => import('./pages/User/Profile'));
const UserPatient = lazy(() => import('./pages/User/Patient'));
const UserPatientUpdate = lazy(() => import('./pages/User/PatientUpdate'));

import './main.css';

import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/es/integration/react';
import { store, persistor } from './redux/store';
import { toggleShowLoginModal } from './redux/actions';

function RequireAuth({ children }) {
  let location = useLocation();
  if (!store.getState().user.token) {
    store.dispatch(toggleShowLoginModal(true));
    return <Navigate to='/' state={{ from: location }} replace />;
  }
  return children;
}

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Suspense fallback={<center>页面加载中</center>}>
        <BrowserRouter>
          <Routes>
            <Route path='/' element={<Layout />}>
              <Route index element={<Home />} />
              <Route path='hospital' element={<Hospital />}>
                <Route path=':id' index element={<HospitalRegistration />} />
                <Route
                  path='registration/:hoscode'
                  element={<HospitalRegistration />}
                />
                <Route
                  path='schedule/:hoscode/:depcode'
                  element={<HospitalSchedule />}
                />
                <Route path='booking/:id' element={<HospitalBooking />} />
                <Route path='detail/:hoscode' element={<HospitalDetail />} />
                <Route path='notice/:hoscode' element={<HospitalNotice />} />
                <Route path='suspend/:hoscode' element={<HospitalSuspend />} />
                <Route
                  path='query/:hoscode'
                  index
                  element={<HospitalQuery />}
                />
                <Route path='*' element={<NoMatch />} />
              </Route>

              <Route path='user' element={<UserCenter />}>
                <Route
                  path='certification'
                  index
                  element={
                    <RequireAuth>
                      <UserCertification />
                    </RequireAuth>
                  }
                />
                <Route
                  path='order'
                  element={
                    <RequireAuth>
                      <UserOrder />
                    </RequireAuth>
                  }
                />
                <Route
                  path='orderDetail/:id'
                  element={
                    <RequireAuth>
                      <UserOrderDetail />
                    </RequireAuth>
                  }
                />
                <Route
                  path='patient'
                  element={
                    <RequireAuth>
                      <UserPatient />
                    </RequireAuth>
                  }
                />
                <Route
                  path='patientUpdate/:id'
                  element={
                    <RequireAuth>
                      <UserPatientUpdate />
                    </RequireAuth>
                  }
                />
                <Route
                  path='patientUpdate'
                  element={
                    <RequireAuth>
                      <UserPatientUpdate />
                    </RequireAuth>
                  }
                />
                <Route
                  path='feedback'
                  element={
                    <RequireAuth>
                      <UserFeedback />
                    </RequireAuth>
                  }
                />
                <Route
                  path='profile'
                  element={
                    <RequireAuth>
                      <UserProfile />
                    </RequireAuth>
                  }
                />
                <Route path='*' element={<NoMatch />} />
              </Route>
              <Route path='*' element={<NoMatch />} />
            </Route>
          </Routes>
        </BrowserRouter>
      </Suspense>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

function NoMatch() {
  return (
    <div>
      <h2>404,页面没找到!</h2>
      <p>
        <Link to='/'>点击返回首页</Link>
      </p>
    </div>
  );
}
